<template>
  <div>
    <Hearder>
      <template v-if="true" #default>
        <div class="mid">
          <ul>
            <li>
              <router-link active-class="active" to="/home/index">首页</router-link>
            </li>
            <li>
              <a href="javascript:;" @click="router.push('/home/course')">课程</a>
            </li>
            <li>
              <a href="javascript:;">会员</a>
            </li>
            <li>
              <a href="javascript:;">简历1</a>
            </li>
            <li>
              <a href="javascript:;">博客</a>
            </li>
            <li>
              <a href="javascript:;">系统班</a>
            </li>
          </ul>
          <div class="search">
            <input type="text" />
            <el-icon style="vertical-align: middle" size="30px">
              <Search />
            </el-icon>
          </div>
          <el-icon style="vertical-align: middle" size="30px">
            <ShoppingCart @click="router.push('/home/shopcar')" />
          </el-icon>
          <a href="javascript:;" style="margin-right: 15px">我的课程</a>
        </div>
      </template>
      <template v-else #default>
        <div>1234567</div>
      </template>
    </Hearder>
    <!-- 二级路由占位 -->
    <router-view></router-view>
  </div>
</template>

<script setup>
import Hearder from "@/components/Hearder/Hearder.vue";
import { ShoppingCart, Search } from "@element-plus/icons-vue";
const router = useRouter();
</script>

<style lang="less" scoped>
.mid {
  flex: 1;
  // width: auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  ul {
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    width: 32.2857vw;

    li {
      height: 100%;
      flex: 1;
      text-align: center;
      line-height: 7.1429vw;
      color: #808090;

      .active {
        color: red;
      }
    }
  }
}
</style>
